<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for='(product,index) in saleProducts' :key = 'index'>
                <span class="name">{{product.name}}</span>
                <span class="price">${{product.price}}</span>
            </li> 

        </ul>
        <button v-on:click = 'reducePrice'>商品降价</button>
    </div>
</template>
<script>
export default { 
    name:'product-list-one',
    computed:{
        products(){
            return this.$store.state.products;
            },
        saleProducts(){
            return this.$store.getters.saleProducts;         
            },
        // reducePrice(){
        //     return this.$store.state.products.forEach(product => {
        //         product.price-=1
        //     });
        // }

        },
        methods:{
            reducePrice:function(){
                // this.$store.state.products.forEach(product => {
                //       product.price -= 1
                // });
                this.$store.commit('reducePrice')
            }
        }
   
}
</script>
<style scoped>
     #product-list-one{
        background-color: #FFF8B1;
        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
        margin-bottom: 30px;
        padding: 10px 20px;
       
    }
     #product-list-one ul{
         padding: 0;
         list-style-type: none;
     }
     #product-list-one ul li{
         display: inline-block;
         margin-right: 10px;
         margin-top: 10px;
         padding: 20px;
         background:rgba(255,255,255,0.7);
     }
     .price{
         font-style: bold;
         color: #E8800C
     }
</style>
